<%-- 
    Document   : planEstudios
    Created on : 14-jun-2012, 10:56:53
    Author     : Administrador
--%>

<%@page import="com.javabeans.Pensum"%>
<%@page import="com.javabeans.Carrera"%>
<%@page import="com.javabeans.Materia"%>
<%@page import="com.javabeans.MateriaPensum"%>
<%@include file="../../../../controlSession.jsp" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
    int i = 0;
    int idPensum = Integer.parseInt(request.getParameter("idPensum"));
    Carrera carrera = (Carrera)request.getAttribute("carrera");
    List<Materia> ofertasM = (List<Materia>)request.getAttribute("ofertasM");
    List<MateriaPensum> electivas = new ArrayList<MateriaPensum>();
    List<MateriaPensum> mps = (List<MateriaPensum>)request.getAttribute("mps");
    List<MateriaPensum> mpInactivos = (List<MateriaPensum>)request.getAttribute("mpInactivos");
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>SI-ESFM </title>
        <meta name="description" content="Derechos Reservados SI-ESFM." />
        <link rel="stylesheet" href="<%=s_path%>/css/styles.css" type="text/css" />
        <link rel="stylesheet" href="<%=s_path%>/css/menu/style.css" type="text/css" />
        <link rel="stylesheet" href="<%=s_path%>/css/themes/start/jquery-ui-1.8.20.custom.css" type="text/css" />
        <link rel="shortcut icon" href="<%=s_path%>/images/ico.png" type="image/png"/>
        
        <script type="text/javascript" src="<%=s_path%>/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/validate/jquery.validate.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.core.min.js"></script>  <!--si o si cargar esto-->
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.widget.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.position.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.mouse.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.button.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.draggable.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.resizable.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.ui.dialog.min.js"></script>
        <script type="text/javascript" src="<%=s_path%>/js/ui/minified/jquery.effects.core.min.js"></script>
        
        <script type="text/javascript" src="<%=s_path%>/js/comun.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#dialogo").dialog({
                    autoOpen: false,
                    title: "Formulario Nueva Materia",
                    height: 300,
                    width: 700,
                    modal: true,
                    buttons: {
                        "Aceptar": function() {
                            $("#idMateria option:selected").each(function (){
                                $("#nomMateria").val($(this).text());
                            });
                            var flag = $("#formPlanEstudio").valid();
                            if(flag){
                                $.ajax({
                                    type: 'POST',
                                    url: 'Administracion',
                                    data: $('#formPlanEstudio').serialize(),
                                    success: function(res){
                                        $('#content').html(res);
                                    },
                                    error:function(){alert("Error! al registrar una materia al plan de pensum.")}
                                });
                                $( this ).dialog( "close" );
                            }
                        },
                        Cancelar: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    close: function() {
                        // implementar lo que convenga
                    }
		});
                
               // boton add departamento
               $.fn.addMateria = function(){
                    if(ofertasM.length > 0){
                        $('#formPlanEstudio').each(function(){
                            this.reset();
                        });
                        resetLevel();
                        resetRequisito();
                        options = "<option value='' selected='true'>Seleccione</option>";
                        for(i=0; i<ofertasM.length; i++){
                            options += "<option value='"+ofertasM[i][0]+"'>"+ofertasM[i][1]+"</option>";
                        }
                        
                        $("#idMateria").html(options);
                        $("#electivaN").attr("checked", "true");
                        $("#level").focus();
                        $("#titleForm").text("Nueva Materia");
                        $("#accion").val("112");
                        $( "#dialog:ui-dialog" ).dialog("destroy");
                        $( "#dialogo" ).dialog("open");
                    }else
                        alert("No existe materias, registr&oacute; algunos para la especialidad");
               }
               
               $("#level").change(function(){ // si cambia de unidad académica tambien cambiamos en la variable auxiliar
                    $("#level option:selected").each(function (){
                        level = $(this).val();
                        options = "<option value='' selected='true'>Seleccione</option>";
                        if(level != ""){
                            level = parseInt(level, 10);
                            i = 0;
                            j = 0;
                            while(j<materiasR.length){
                                if(level > parseInt(materiasR[j][1],10)){
                                    options += "<option value='"+materiasR[i][0]+"'>"+materiasR[i][2]+"</option>"
                                    i++;
                                }
                                j++;
                            }
                            options += "<option value='0'><b>NINGUNO</b></option>";
                            $("#idPadre").html(options);
                        }else{
                            options += "<option value='0'><b>NINGUNO</b></option>";
                            $("#idPadre").html(options);
                        }
                    });
                });
               
                // baja MATERIA
                $.fn.darBaja = function(idPensum,idCarrera,idMateria,nomMateria){
                    nomCarrera = $("#nomCarrera").val();
                    idPensum = $("#idPensum").val();
                    idCarrera = $("#idCarrera").val();
                    if(confirm("Â¿Estas seguro de dar baja la materia ''"+nomMateria+"''?")){
                        $.ajax({
                            url: "Administracion",
                            type: "GET",
                            data:{ accion:113, idPensum:idPensum,idCarrera:idCarrera,idMateria:idMateria,nomMateria:nomMateria, nomCarrera:nomCarrera},
                            success:function(res){
                                $('#content').html(res);
                            },
                            error: function(res){ alert("Error! al dar de baja la materia."); }
                        });
                    }
                }
                
                // alta materia
                $.fn.darAlta = function(idPensum,idCarrera,idMateria,nomMateria){
                    nomCarrera = $("#nomCarrera").val();
                    idPensum = $("#idPensum").val();
                    idCarrera = $("#idCarrera").val();
                    if(confirm("Â¿Realmente esta seguro de dar de alta la materia ''"+nomMateria+"''?")){
                        $.ajax({
                            url: "Administracion",
                            type: "GET",
                            data:{ accion:114, idPensum:idPensum,idCarrera:idCarrera,idMateria:idMateria, nomMateria:nomMateria, nomCarrera:nomCarrera},
                            success:function(res){
                                $('#content').html(res);
                            },
                            error: function(res){ alert("Error! al dar de alta la materia."); }
                        });
                    }
                }
                
                // elimina materia del plan de estudio
                $.fn.eliminar = function(idPensum,idCarrera,idMateria,nomMateria){
                    nomCarrera = $("#nomCarrera").val();
                    idPensum = $("#idPensum").val();
                    idCarrera = $("#idCarrera").val();
                    if(confirm("Â¿Realmente esta seguro de ELIMINAR la materia ''"+nomMateria+"''?")){
                        $.ajax({
                            url: "Administracion",
                            type: "GET",
                            data:{ accion:115, idPensum:idPensum,idCarrera:idCarrera,idMateria:idMateria, nomMateria:nomMateria, nomCarrera:nomCarrera},
                            success:function(res){
                                $('#content').html(res);
                            },
                            error: function(res){ alert("Error! al dar de eliminar la materia."); }
                        });
                    }
                }
                
                $.fn.verPlanEstudio = function(idCarrera,idPensum){
                    location.href = "Administracion?accion=111&idCarrera="+idCarrera+"&idPensum="+idPensum;
                }
                
            });
            
            function resetMateria(){
                document.getElementById("idMateriaPensum").selectedIndex = 0;
            }
            function resetRequisito(){
                document.getElementById("idPadre").selectedIndex = 0;
            }
            function resetLevel(){
                document.getElementById("level").selectedIndex = 0;
            }
            
            // muestra oculta
            function mostrarOcultar(){
                if(document.getElementById("materiasBaja").style.display == 'none'){
                    document.getElementById("materiasBaja").style.display = 'block';
                    document.getElementById("verOcultar").value = "Ocultar Bajas";
                    document.getElementById("verOcultar").title="Pulsa aqui para ocultar bajas";
                }else{
                    document.getElementById("materiasBaja").style.display = 'none';
                    document.getElementById("verOcultar").value = "Mostrar Bajas"
                    document.getElementById("verOcultar").title="Pulsa aqui para mostrar bajas";
                }
            }
        </script>
    </head>
    <body onload="showTime(<%=s_param%>)">
        <div id="top-wrap">
            <!-- cabeza principal -->
            <%@include file="../../../../head.jsp" %>

            <!-- cuerpo -->
            <div id="bodySpace">               
                <!-- aqui va la ruta -->
                <div class="clearfix" id="middle">
                    <!-- aqui va el arbol de entrada -->
                    <div id="breadcrumb"><!-- le da la forma de la imagen -->
                        <ul>
                            <li><a>Home</a></li>
                            <li><span style="color:#666">Administraci&oacute;n</span></li>
                            <li><span style="color:#666">Administraci&oacute;n Acad&eacute;mico</span></li>
                            <li><span style="color:#666">Especialidad</span></li>
                            <li class="current-page"><span class="end"><span class="middle">Administraci&oacute;n Pensum</span></span></li>
                        </ul>
                        <!-- para la hora -->
                        <div style="clear: both;position: absolute;text-align: right;width: 100%;"><span id="fechaServ"></span>&nbsp;&nbsp;<span id="horaServ" style=""></span>&nbsp;</div>
                    </div><!-- begin SIDEBAR FIRST -->
                </div>
                
                <div id="principal">
                    <!-- izquierda -->
                    <div class="cuerpo2" style="border: 0px solid">
                        <div class="izq" style="border: 0px solid">
                            <%@include file="../../../../bodyIzq.jsp" %>
                        </div>
                        <div class="der" style="border: 0px solid"> 
                            <center>
                            <div id="content">
                            <h2 class="decorado">Plan de Estudios  ''<%=carrera.getNombre()%>''</h2>
                            <table class="miReporte" style="width: 100%">
                                <tr>
                                    <td style="text-align: right"><input type="button" class="boton" value="A&ntilde;adir Materia" onclick="$.fn.addMateria()"/></td>
                                </tr>
                            </table>
                            <table class="tabla_decorado" style="width: 100%">
                                <thead>
                                    <tr><!--  -->
                                        <th width="4%" class="th_decoradoRowspan">Nro</th>
                                        <th width="4%" class="th_decoradoRowspan">NIVEL</th>
                                        <th width="40%" class="th_decoradoRowspan">MATERIA</th>
                                        <th width="7%" class="th_decoradoRowspan">SIGLA</th>
                                        <th width="40%" class="th_decoradoRowspan">REQUISITO</th>
                                        <th width="5%" class="th_decoradoRowspan">ACCI&Oacute;N</th>
                                    </tr>
                                </thead>
                                <tbody>
                            <%
                                i = 1;
                                for(MateriaPensum mp : mps){
                                    if(!mp.isElectiva()){
                            %>          
                                        <tr class="tr_decorado">
                                            <td class="th_decorado" style="text-align: center"><%=i%></td>
                                            <td class="th_decorado"><%=mp.getLevel()%></td>
                                            <td class="th_decorado"><%=mp.getMateria().getNombre()%></td>
                                            <td class="th_decorado"><%=mp.getMateria().getSigla()%></td>
                                            <td class="th_decorado"><%=mp.getPadreMateria().getMateria().getNombre()%></td>
                                            <td class="td_decoradoDerecha" style="text-align: center">
                                                <input type="button" value="Eliminar" onclick="$.fn.eliminar(<%=mp.getIdPensum()%>,<%=mp.getIdCarrera()%>,<%=mp.getIdMateria()%>,'<%=mp.getMateria().getNombre()%>')" class="botonRep" title="Pulsa aqui para eliminar la materia del pensum."/>
                                            </td>
                                        </tr>
                            <%      i++;
                                    }else{
                                        electivas.add(mp);
                                    }
                                }
                                if(i == 1){
                                    out.write("<tr class='tr_decorado'>");
                                    out.write("     <td class='td_decorado' colspan='6' style='text-align:center'><span style='color:red'>No existe materias en el Plan de Estudios!</span></td>");
                                    out.write("</tr>");
                                }
                            %>
                                </tbody>
                            </table>
                            
                                <!-- MATERIAS ELECTIVAS -->
                            <h2 class="decorado">Materias Electivas</h2>
                            <table class="tabla_decorado" style="width: 100%">
                                <thead>
                                    <tr><!--  -->
                                        <th width="4%" class="th_decoradoRowspan">Nro</th>
                                        <th width="4%" class="th_decoradoRowspan">NIVEL</th>
                                        <th width="39%" class="th_decoradoRowspan">MATERIA</th>
                                        <th width="7%" class="th_decoradoRowspan">SIGLA</th>
                                        <th width="38%" class="th_decoradoRowspan">REQUISITO</th>
                                        <th width="8%" class="th_decoradoRowspan" colspan="2">ACCIONES</th>
                                    </tr>
                                </thead>
                                <tbody>
                            <%
                                i = 1;
                                for(MateriaPensum mp : electivas){
                            %>          
                                    <tr class="tr_decorado">
                                        <td class="th_decorado" style="text-align: center"><%=i%></td>
                                        <td class="th_decorado"><%=mp.getLevel()%></td>
                                        <td class="th_decorado"><%=mp.getMateria().getNombre()%></td>
                                        <td class="th_decorado"><%=mp.getMateria().getSigla()%></td>
                                        <td class="th_decorado"><%=mp.getPadreMateria().getMateria().getNombre()%></td>
                                        <td class="td_decoradoDerecha" style="text-align: center">
                                            <input type="button" value="Dar Baja" onclick="$.fn.darBaja(<%=mp.getIdPensum()%>,<%=mp.getIdCarrera()%>,<%=mp.getIdMateria()%>,'<%=mp.getMateria().getNombre()%>')" class="botonRep" title="Pulsa aqui para dar de baja la materia."/>
                                        </td>
                                        <td class="td_decoradoDerecha" style="text-align: center">
                                            <input type="button" value="Eliminar" onclick="$.fn.eliminar(<%=mp.getIdPensum()%>,<%=mp.getIdCarrera()%>,<%=mp.getIdMateria()%>,'<%=mp.getMateria().getNombre()%>')" class="botonRep" title="Pulsa aqui para eliminar la materia del pensum."/>
                                        </td>
                                    </tr>
                            <%      i++;
                                }
                                if(i == 1){
                                    out.write("<tr class='tr_decorado'>");
                                    out.write("     <td class='td_decorado' colspan='7' style='text-align:center'><span style='color:red'>No existe materias ELECTIVAS en el Plan de Estudios!</span></td>");
                                    out.write("</tr>");
                                }
                            %>
                                </tbody>
                            </table>    
                                
                            <!-- boton que muestra y oculta los unidades académicas dedos de baja -->    
                            <table class="miReporte" style="width: 100%">
                                <tr>
                                    <td style="text-align: right"><input type="button" name="verOcultar" id="verOcultar" value="Mostrar Bajas" onclick="mostrarOcultar()" class="boton" title="Pulsa aqui para mostrar"/></td>
                                </tr>
                            </table>      <br/><br/>
                                
                            <!-- para mostrar bajas -->
                            <div id="materiasBaja" style="display:none;">
                                <h2 class="decorado">Materias del Plan de Estudio dados de Baja</h2>
                                <table class="tabla_decorado" style="width: 100%">
                                    <thead>
                                        <tr><!--  -->
                                            <th width="4%" class="th_decoradoRowspan">Nro</th>
                                            <th width="4%" class="th_decoradoRowspan">NIVEL</th>
                                            <th width="35%" class="th_decoradoRowspan">MATERIA</th>
                                            <th width="7%" class="th_decoradoRowspan">SIGLA</th>
                                            <th width="10%" class="th_decoradoRowspan">TIPO MATERIA</th>
                                            <th width="35%" class="th_decoradoRowspan">REQUISITO</th>
                                            <th width="5%" class="th_decoradoRowspan">ACCI&Oacute;N</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                <%
                                    i = 1;
                                    String tipoM = "";
                                    for(MateriaPensum mpi : mpInactivos){
                                        if(mpi.isElectiva())
                                            tipoM = "ELECTIVA";
                                        else
                                            tipoM = "OBLIGATORIO";
                                %>          
                                        <tr class="tr_decorado">
                                            <td class="th_decorado" style="text-align: center"><%=i%></td>
                                            <td class="th_decorado"><%=mpi.getLevel()%></td>
                                            <td class="th_decorado"><%=mpi.getMateria().getNombre()%></td>
                                            <td class="th_decorado"><%=mpi.getMateria().getSigla()%></td>
                                            <td class="th_decorado"><%=tipoM%></td>
                                            <td class="th_decorado"><%=mpi.getPadreMateria().getMateria().getNombre()%></td>
                                            <td class="td_decoradoDerecha" style="text-align: center">
                                                <input type="button" value="Dar Alta" onClick="$.fn.darAlta(<%=mpi.getIdPensum()%>,<%=mpi.getIdCarrera()%>,<%=mpi.getIdMateria()%>,'<%=mpi.getMateria().getNombre()%>')" class="botonRep" title="Pulsa aqui para dar de alta la materia"/>
                                            </td>
                                        </tr>
                                <%      i++;
                                    }
                                    if(i == 1){
                                        out.write("<tr class='tr_decorado'>");
                                        out.write("     <td class='td_decorado' colspan='7' style='text-align:center'><span style='color:red'>No existen materias dados de baja!<span></td>");
                                        out.write("</tr>");
                                    }
                                    out.println("<script>");
                                    i=0;
                                    out.println(" ofertasM = new Array()");
                                    for(Materia m:ofertasM){
                                        out.println(" ofertasM["+i+"] = new Array("+m.getIdMateria()+",'"+m.getNombre()+"')");
                                        i++;
                                    }
                                    i=0;
                                    out.println(" materiasR = new Array()");
                                    for(MateriaPensum mp:mps){
                                        out.println(" materiasR["+i+"] = new Array("+mp.getIdMateria()+","+mp.getLevel()+",'"+mp.getMateria().getNombre()+"')");
                                        i++;
                                    }
                                    out.println("</script>");
                                %>
                                    </tbody>
                                </table><br/>
                            </div> <!-- End id="content" -->
                                
                            <div id="dialogo"><br/>
                                <h2 class="decorado" id="titleForm"></h2><br/>
                                <form id="formPlanEstudio">
                                    <input type="hidden" name="accion" id="accion" value="0" />
                                    <input type="hidden" name="idCarrera" id="idCarrera" value="<%=carrera.getIdCarrera()%>" />
                                    <input type="hidden" name="idPensum" id="idPensum" value="<%=idPensum%>"/>
                                    <input type="hidden" name="nomCarrera" id="nomCarrera" value="<%=carrera.getNombre()%>"/>
                                    <input type="hidden" name="nomMateria" id="nomMateria" value=""/>
                                    <!-- <div class="error" style="clear:left;text-align:center;"><span></span></div> --> <!-- CONTADOR DE ERRORES -->
                                    <div style="clear:both;">
                                        <label class="form_align30">Nivel: </label>
                                        <select name="level" id="level" class="required form_input_align" title="Seleccione un Nivel!">
                                            <option value="">Seleccione</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                            <option value="4">4</option>
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                            <option value="9">9</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                        </select>
                                        <label class="error">*</label>
                                    </div>
                                    <div style="clear:both;">
                                        <label class="form_align30">Materia: </label>
                                        <select name="idMateria" id="idMateria" class="required form_input_align" title="Seleccione fin de la gesti&oacute;n!">
                                            <option value="">Seleccione</option>
                                        </select>
                                        <label class="error">*</label>
                                    </div>
                                    <div style="clear:both;">
                                        <label class="form_align30" >Tipo Materia: </label>
                                        <input type="radio" name="electiva" id="electivaN" value="false" class="form_input_align"/><label for="electivaN">&nbsp;Normal</label>
                                        <input type="radio" name="electiva" id="electiva" value="true"/><label for="electiva">&nbsp;Electiva</label>
                                        <label class="error">*</label>
                                    </div>
                                    <div style="clear:both;">
                                        <label class="form_align30">Requisito Materia: </label>
                                        <select name="idPadre" id="idPadre" class="required form_input_align" title="Seleccione una materia">
                                            <option value="">Seleccione</option>
                                        </select>
                                        <label class="error">*</label>
                                    </div>
                                </form>
                            </div> <!-- FIN DIV id="dialogo" -->
                            </center>
                            
                        </div> <!-- class='der' -->
                    </div><!--end of leftPan-->
                    
                </div><!--end of content-wrapper-->
            </div><!--end of body-wrap-->
            
            <!-- footer -->

        </div>
    </body>
</html>